<template>
  <section class="section sec-1" :style="styleComputed">
    <div class="cover">
      <img src="/cover.jpg" />
      <video src="/cover.mp4" muted autoplay preload="auto" poster="/cover.jpg" loop></video>
    </div>
    <main>
      <h1>您的<span>需求</span><br />我们帮您<span>开发</span></h1>
      <p class="co-text">
        KEENOHO是一个帮助需求方开发软件的团队。<br />我们是有着专业的设计师、工程师和运维人员的开发团队，<br />有着能够构建深度合作平台和成套的开发生产资料，能帮助你快速完成需求开发上线。
      </p>
      <button class="co-btn arrow" @click="scrollToDom('#sec-2')">了解更多</button>
    </main>
  </section>
</template>
<script>
import { scrollToDom } from '../util';

export default {
  name: 'co-section-1',
  props: {
    maxPercent: {
      type: Number,
      default: 0,
    },
    quotient: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    styleComputed() {
      return {
        transform: `translate3d(0, ${this.maxPercent * 100}%, 0)`,
        opacity: 1 - this.quotient,
      };
    },
  },
  methods: {
    scrollToDom,
  },
};
</script>
<style lang="less" scoped>
.sec-1 {
  background-color: #000;
  min-height: 100vh;
  will-change: transform;
  transform: translate3d(0, 0, 0);

  .cover {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: rotateY(180deg);
    z-index: -1;

    img,
    video {
      display: block;
      width: 1680px;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover;
    }
  }

  main {
    padding-top: 200px;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
  }

  h1 {
    font-size: 120px;
    font-weight: bold;
    span {
      color: #fff;
    }
  }

  p {
    margin-top: 40px;
  }

  .co-btn {
    margin-top: 40px;
  }
}

@media screen and (max-width: 1000px) {
  .sec-1 {
    .cover {
      img {
        width: 100%;
        height: 100%;
      }
      video {
        display: none;
      }
    }

    main {
      padding-top: 30%;
    }

    h1 {
      font-size: 60px;
      text-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    }

    p {
      color: #fff;
      line-height: 1.75;
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    }
  }
}
</style>
